<template>
    <el-form ref="changePassForm" :model="formData" :rules="rules" :label-width="formLabelWidth">

        <el-form-item label="邮箱地址"
                      :error="joinToString(formErrors.email||'')"
                      prop="email">
            <el-input type="text" v-model="formData.email"
                      autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱验证" :error="joinToString(formErrors.code_val||'')"
                      prop="code_val">
            <input-captcha-email
                :send-to="formData.email"
                tpl="captcha_email_change"
                v-on:change="(code_id,code_val)=>{formData.code_id=code_id;formData.code_val=code_val;}"></input-captcha-email>
        </el-form-item>

        <el-form-item
            label=" ">
            <el-button type="primary" @click="submit()">确定修改</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        props: {
            formLabelWidth: {
                type: String,
                default: '120px'
            }
        },

        data() {
            return {
                formData: {
                    email:'',
                    code_id:'',
                    code_val:'',
                },
                formErrors: {},
                rules: {
                    email: [
                        {validator: LeValidator.validateEmail, trigger: 'blur'}
                    ],

                }

            }
        },
        created() {
            let _this = this;

        },
        destroyed(){

        },
        mounted() {
            let _this = this

        },
        methods: {
            joinToString: function (obj, glue) {
                return LeUtils.joinToString(obj, glue)
            },
            submit: function (event) {

                if (event) {
                    event.preventDefault()
                }


                let _this = this;

                //console.log(_this.formChangePassData)
                this.$refs.changePassForm.validate((valid) => {
                    if (valid) {
                        LeRoute.request('api.l-e-s.auth.change_email', _this.formData)
                            .then(function (res_data) {
                                _this.$message.success('修改成功');
                                _this.$refs.changePassForm.resetFields();
                                _this.$emit('changed')
                            }).catch(function (error) {
                            _this.formErrors = LeUtils.valueGet(error, 'response.data.errors',{});
                        })
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });

            },

        }
    }
</script>
